<template>
    <IDrawer v-model="defaultValue" :loading="loading" :width="1200">
        <Form :model="data" :rules="ruleValidate" ref="formCreate" label-position="top">
            <ProductShowList v-model="data.products"></ProductShowList>
            <Row :gutter="20">
                <Col :span="12">
                    <FormItem label="进境关别" prop="district">
                        <RemoteSelect url="common/select/port" v-model="data.district"></RemoteSelect>
                    </FormItem>
                </Col>
                <Col :span="12">
                    <FormItem label="进境类型" prop="type">
                        <RemoteSelect url="common/select/dictionaries/ENTRY_CODE" v-model="data.type"></RemoteSelect>
                    </FormItem>
                </Col>
                <Col :span="12">
                    <FormItem label="运输方式" prop="transport">
                        <RemoteSelect url="common/select/transport" v-model="data.transport"></RemoteSelect>
                    </FormItem>
                </Col>
                <Col :span="12">
                    <FormItem label="包装种类" prop="packing">
                        <RemoteSelect url="common/select/packing" v-model="data.packing"></RemoteSelect>
                    </FormItem>
                </Col>
                <Col :span="12">
                    <FormItem label="货物总重" prop="weight">
                        <Input v-model="data.weight" number></Input>
                    </FormItem>
                </Col>
                <Col :span="12">
                    <FormItem label="货物件数" prop="piece">
                        <Input v-model="data.piece" number></Input>
                    </FormItem>
                </Col>
                <template v-for="(item, index) in data.files">
                    <Col :span="4">
                        <FormItem label="单据类型" :prop="`files.${index}.type`"
                                  :rules="[{required: true, message: '单据类型必须填写'}]">
                            <Input v-model="data.files[index].type" number></Input>
                        </FormItem>
                    </Col>
                    <Col :span="16">
                        <FormItem label="单据文件" :prop="`files.${index}.url`"
                                  :rules="[{required: true, message: '单据文件必须填写'}]">
                            <UploadFile url="common/index/upload" v-model="data.files[index].url"></UploadFile>
                        </FormItem>
                    </Col>
                    <Col :span="4">
                        <FormItem label="操作">
                            <Button @click="deleteFileHandle(index)">删除</Button>
                        </FormItem>
                    </Col>
                </template>

            </Row>
            <FormItem label="备注说明" prop="remark">
                <Input v-model="data.remark" :rows="4" type="textarea"></Input>
            </FormItem>
        </Form>

        <div slot="footer">
            <ButtonGroup>
                <Button type="info" icon="md-log-out" @click="addFileHandle">添加随附单据</Button>
                <Button type="primary" icon="ios-add" @click="submit('formCreate')">提交</Button>
                <Button type="warning" icon="ios-archive" @click="defaultValue = false">返回</Button>
            </ButtonGroup>
        </div>
    </IDrawer>
</template>

<script>
    import IDrawer from "../../../../components/layout/IDrawer";
    import IDrawerMixins from "../../../../mixins/iDrawerMixins";
    import IData from "./data"
    import RemoteSelect from "../../../../components/form/remoteSelect";
    import ProductShowList from "../../../../components/form/product/showList";
    import UploadFile from "../../../../components/form/uploadFile";

    export default {
        name: "create",
        components: {UploadFile, IDrawer, RemoteSelect, ProductShowList},
        mixins: [IDrawerMixins, IData],
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                this.loading = true;
                this.$http.get(`warehouse/receiving/${this.props.id}/edit`).then((res) => {
                    this.data = res;
                }).finally(() => {
                    this.loading = false;
                });
            },
            submit(name) {
                this.validate(name).then(() => {
                    this.loading = true;
                    this.$http.put(`warehouse/receiving/${this.props.id}`, this.data).then((res) => {
                        this.defaultValue = false;
                    }).finally(() => {
                        this.loading = false;
                    });
                });
            }
        }
    }
</script>

<style scoped>

</style>
